<template>
	<div>
		<el-table :data="kvModuleData" style="width: 100%">
			<el-table-column type="expand">
				<template slot-scope="scops">
					<el-table :data="scops.row.field_list" style="width: 100%">
						<el-table-column prop="field_name" label="子模块名称"></el-table-column>
						<el-table-column prop="type" label="类型">
							<template slot-scope="scope">
								<span>{{scope.row.type | wordBookVal}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="value" label="键名"></el-table-column>
						<el-table-column prop="options" label="值">
							<template slot-scope="scope">
								<span>{{scope.row.options.join("、")}}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center">
							<template slot-scope="scope">
								<el-button @click="edition(scope.row)" size="mini">编辑</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-table-column>
			<el-table-column prop="module" label="一级模块名称"></el-table-column>
		</el-table>

		<!--修改数据-->
		<el-dialog title="修改" :visible.sync="checkWordBookModalVis" width="30%" :before-close="handleClose">
			<div>
				<!--<h3>请选择模块类型</h3>-->
				<el-select v-model="checkWordBooklData" placeholder="请选择模块类型">
					<el-option v-for="item in wordBook" :key="item.type" :label="item.describ" :value="item.type">
					</el-option>
				</el-select>

			</div>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="function(){checkWordBookModalVis = false;checkWordBooklData='';}">取 消</el-button>
		    <el-button type="primary" @click="checkWordBookModalOk">确 定</el-button>
		  </span>
		</el-dialog>

		<!--添加字典数据-->
		<el-dialog title="请选择数据字典字段" :visible.sync="allWordDataVis" width="30%" :before-close="handleClose">
			<div>
				<el-table ref="singleTable" :data="allWordData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
					<el-table-column prop="key_id" label="Key">
					</el-table-column>
					<el-table-column prop="name" label="描述">
					</el-table-column>
					<el-table-column prop="options" label="值">
						<template slot-scope="scope">
							<span>{{scope.row.options.join("、")}}</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="function(){allWordDataVis=false;currentWordData=''}">取 消</el-button>
		    <el-button type="primary" @click="allWordCheck">确 定</el-button>
		  </span>
		</el-dialog>

		<!--添加范围数据-->
		<el-dialog title="请输入范围数值" :visible.sync="rangeVis" width="30%" :before-close="handleClose">
			<div>
				<span><el-input-number size="mini" v-model="rangeStart"></el-input-number> - <el-input-number size="mini" v-model="rangeEnd"></el-input-number></span>
			</div>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="function(){rangeVis=false;rangeStart=0;rangeEnd=0;}">取 消</el-button>
		    <el-button type="primary" @click="rangeAdd">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import { kvGetRefAll, kvUpdateRef, kvGetAll, Login } from '@/assets/util/api.js'
	export default {
		data() {
			return {
				access_token: "",
				activeModuleName: "",
				kvModuleData: [],
				wordBook: {
					key: "",
					value: "",
					desc: ""
				},
				checkWordBooklData: "", // 选择类型，此字段等同于 type
				checkWordBookModalVis: false,
				//可选择的数据字典
				allWordData: "",
				allWordDataVis: false,
				currentWordData: "",
				module: "",
				field: "",
				rangeVis: false,
				rangeStart: 0,
				rangeEnd: 0,
			};
		},
		mounted() {
			this.access_token = this.inStorage("get", "access_token");
			this.wordBook = this.inStorage("get", "wordBook")
			this.kvGetRefAll();
		},
		methods: {
			kvGetRefAll() {
				var params = {
					access_token: this.access_token
				}
				kvGetRefAll(this, params).then((res) => {
					console.log(res)
					if(res.data.state) {
						this.kvModuleData = res.data.data;
					}
					if(res.data.code) {
						this.$message.error(this.publicMsg(res.data.code, res.data.error));
					}
				})
			},
			//修改字段
			kvUpdateRef(value, fun) {
				var params = {
					access_token: this.access_token,
					module: this.module,
					field: this.field,
					type: this.checkWordBooklData,
					value: value,
				}
				kvUpdateRef(this, params).then((res) => {
					if(res.data.state) {
						this.$message.success("修改成功！");
						fun(this) || fun;
						this.kvGetRefAll();
					}
					if(res.data.code) {
						this.$message.error(this.publicMsg(res.data.code, res.data.error));
					}
				})
			},
			//拉取所有可供选择的数据字典
			kvGetAll() {
				var params = {
					access_token: this.access_token
				}
				kvGetAll(this, params).then((res) => {
					if(res.data.state == true) {
						this.allWordData = res.data.data;
						this.allWordDataVis = true;
					}
				})

			},
			//进入编辑弹框
			edition(row) {
				this.module = row.module;
				this.field = row.field;
				this.checkWordBookModalVis = true;
			},
			checkWordBookModalOk() {
				this.checkWordBookModalVis = false;
				switch(this.checkWordBooklData) {
					case "kv":
						this.kvGetAll();
						break;
					case "range":
						this.rangeVis = true;
						break;
					default:
						this.kvUpdateRef("", function(ths) {
							
						});
						break;
				}
			},
			//单选数据变化
			handleCurrentChange(e) {
				console.log(e);
				this.currentWordData = e;
			},
			allWordCheck() {
				if(!this.currentWordData) {
					this.$message.error("请选择要添加的字段数据！");
				}
				this.kvUpdateRef(this.currentWordData.key_id, function(ths) {
					ths.allWordDataVis = false;
				});
			},
			rangeAdd() {
				if(this.rangeStart>this.rangeEnd) {
					this.$message.error("范围结束值必须大于起始值！");
				}
				var value = this.rangeStart + '`'+this.rangeEnd;
				this.kvUpdateRef(value, function(ths) {
					ths.rangeStart = 0;
					ths.rangeEnd = 0;
					ths.rangeVis = false;
				});
			}
		}
	}
</script>
<style lang="scss" scoped>

</style>